<template>
	<div class="box">

		<div class="first" v-if="infoData.firstStatus==2">
			<div class="head center">
				<div class="jbt">{{this.roomId}}号祭拜厅</div>
			</div>
			<div class="cont center">
				<div class="name">{{this.infoData.firstNo}}号 {{this.infoData.firstName}}</div>
				<div class="jb">祭拜中</div>

			</div>
			<div class="f21 dqjb flex-between">
					<div>当前祭拜：</div>
					<div class="center jbs">{{this.infoData.firstName}}</div>
				</div>
				<div class="f21 zbjb flex-between">
					<div>准备祭拜：</div>
					<div class="center zbs" v-if="infoData.secondName!=''">{{infoData.secondName}}</div>
					<div class="center zbs" v-if="infoData.secondName==''">--</div>
				</div>
				<div class="foot">
				<div class="f16">
			        <div> 温馨提示：</div>
					<div>1.未签到用户请先到接待台扫码签到</div>
					<div>2.过号用户请重新到接待台扫码排队</div>
				</div>
			</div>
				
		</div>

		<div class="scent" v-if="infoData.firstStatus==1">
			<div class="head center">
				<div class="jbt">{{this.roomId}}号祭拜厅</div>
			</div>
			<div class="cont center">
				<div class="name">请{{this.infoData.firstNo}}号{{this.infoData.firstName}}做好准备</div>
				<div class="jb">一分钟后开始祭拜进场检码</div>
				<div class="jb" v-if="this.timeuot > 0">{{this.timeuot}}</div>
			</div>
			<div class="f21 dqjb flex-between">
					<div>当前祭拜：</div>
					<div class="center jbs">--</div>
				</div>
				<div class="f21 zbjb flex-between">
					<div>准备祭拜：</div>
					<div class="center zbs" v-if="infoData.secondName!=''">{{infoData.secondName}}</div>
					<div class="center zbs" v-if="infoData.secondName==''">--</div>
				</div>
				<div class="jbt" style="margin-top: 50px;" @click="stopDown()">{{state==0?'暂停':'继续'}}</div>
				<div class="foot">
				<div class="f16">
			        <div> 温馨提示：</div>
					<div>1.未签到用户请先到接待台扫码签到</div>
					<div>2.过号用户请重新到接待台扫码排队</div>
				</div>
			</div>
			

		</div>

		<div class="thret" v-if="infoData.firstStatus==4">
			<div class="head center">
				<div class="jbt">{{this.roomId}}号祭拜厅</div>
			</div>
			<div class="cont center">
				<div class="name">{{this.infoData.firstNo}}号 {{this.infoData.firstName}}</div>
				<div class="jb" style="font-size: 18px;">进场检码 <span class="doun">{{timeuot}}秒</span></div>
				<!-- <input v-model="inputValue" @input="changValue" id="codedd" autocomplete="off" style="opacity: 0;" /> -->
			</div>
			<div class="f21 dqjb flex-between">
					<div>当前祭拜：</div>
					<div class="center jbs">--</div>
				</div>
				<div class="f21 zbjb flex-between">
					<div>准备祭拜：</div>
					<div class="center zbs" v-if="infoData.secondName!=''">{{infoData.secondName}}</div>
					<div class="center zbs" v-if="infoData.secondName==''">--</div>
				</div>
				<div class="foot">
				<div class="f16">
			        <div> 温馨提示：</div>
					<div>1.未签到用户请先到接待台扫码签到</div>
					<div>2.过号用户请重新到接待台扫码排队</div>
				</div>
			</div>
		</div>

		<div class="fourth" v-if="infoData.firstStatus==-1">
			<div class="head center">
				<div class="jbt">{{this.roomId}}号祭拜厅</div>
			</div>
			<div class="cont center" style="padding: 0 10px;">
				<div class="name" style="padding-top: 60px;">检码超时，请过号用户重新签到排队</div>
				<div class="jb">请 {{infoData.secondName}} 做好准备一分钟后开始祭拜进场检码</div>
			</div>
			<div class="f21 dqjb flex-between">
					<div>当前祭拜：</div>
					<div class="center jbs">--</div>
				</div>
				<div class="f21 zbjb flex-between">
					<div>准备祭拜：</div>
					<div class="center zbs" v-if="infoData.secondName!=''">{{infoData.secondName}}</div>
					<div class="center zbs" v-if="infoData.secondName==''">--</div>
				</div>
				<div class="foot">
				<div class="f16">
			        <div> 温馨提示：</div>
					<div>1.未签到用户请先到接待台扫码签到</div>
					<div>2.过号用户请重新到接待台扫码排队</div>
				</div>
			</div>
		</div>


		<div class="fourth" v-if="infoData==''">
			<div class="head center">
				<div class="jbt">{{this.roomId}}号祭拜厅</div>
			</div>
			<div class="cont center" style="padding: 0 10px;">
				<div class="name" style="padding-top: 60px;">当前房间无祭拜用户</div>
			</div>
			
				<div class="f21 dqjb flex-between">
					<div>当前祭拜：</div>
					<div class="center jbs">--</div>
				</div>
				<div class="f21 zbjb flex-between">
					<div>准备祭拜：</div>
					<div class="center zbs">--</div>
				</div>
				<div class="foot">
				<div class="f16">
                    <div> 温馨提示：</div>
					<div>1.未签到用户请先到接待台扫码签到</div>
					<div>2.过号用户请重新到接待台扫码排队</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		format,
		ossUri
	} from '../../utils/tool.js';


	export default {
		name: 'main',
		data() {
			return {
				roomId: 5,
				infoData: '',
				isfirst: 0,
				timeuot: 120,
				timeer: '',
				inputValue: '',
				timer: '',
				state: 0
			};
		},
		activated() {

		},
		created() {
			this.signInList();
			this.keyup();
		},
		methods: {
			keyup() {
				let that = this;
					document.onkeydown = function(event) {
						console.log(event)
						if (event.key != 'Enter') {
							that.inputValue = that.inputValue + event.key
						} else {
						if (that.infoData.firstStatus == 4) {
							that.$api.reserve.signInTwo({
								signCode: that.inputValue
							}).then(d => {
								if (d && d.code == 1) {
									that.inputValue = '';
									that.signInList();
									clearInterval(that.timer);
									that.isfirst = 0;
									that.timeuot = 120;
								} else {
									that.inputValue = '';
									that.$notify({
										type: 'danger',
										message: d.msg
									})
								}
							})
						}
					}
				}

			},
			signInList() {
				//获取列表
				let that = this;
				this.$api.reserve.signInList({
					roomId: that.roomId
				}).then(d => {
					if (d.code == 1 && d.data) {
						if (d.data != '') {
							var info = {};
							info.roomNo = that.roomId;
							var queue = d.data;
							if (queue.length >= 1) {
								info.firstId = queue[0].orderId;
								info.firstNo = queue[0].serialNum;
								info.firstName = queue[0].customerName;
								info.firstStatus = queue[0].reserveStatus;
							}
							if (queue.length >= 2) {
								info.secondId = queue[1].orderId;
								info.secondNo = queue[1].serialNum;
								info.secondName = queue[1].customerName;
								info.secondStatus = queue[1].reserveStatus;
							}
							if (info.firstStatus == 1 && that.isfirst == 0) {
								that.isfirst = 1;
								that.timeuot = 120;
								that.untime();
								clearInterval(that.timeer)
							} else {
								if (info.firstStatus == 2) {
									setTimeout(function() {
										that.signInList();
									}, 5000)
								} else {
									that.getlist();
								}
							}
							that.infoData = info;
						} else {
							that.infoData = d.data;
							setTimeout(function() {
								that.signInList();
							}, 5000)
						}
						console.log(that.infoData);
					} else {
						console.log('erorr....');
					}
				}).catch(e => {
					console.log(e)
				})
			},
			getlist() {
				let that = this;
				if (that.infoData != '') {
					that.timeer = setInterval(function() {
						that.signInList();
					}, 2500)
				}
			},
			untime() {
				let that = this;
				that.timeuot = 120;
				that.timer = setInterval(function() {
					if (that.timeuot > 0) {
						that.timeuot = that.timeuot - 1;
					}
					if (that.timeuot <= 60) {
						that.infoData.firstStatus = 4;
					}
					if (that.timeuot == 0) {
						that.infoData.firstStatus = -1;
						clearInterval(that.timer);
						that.isfirst = 0;
						that.timeuot = 120;
						that.getlist();
						that.delQey();
					}
				}, 1000)
			},
			delQey() {
				console.log(this.timeuot);
				console.log("检码超时");
				let that = this;
				this.$api.reserve.signInTimeout({
					orderId: that.infoData.firstId
				}).then(d => {
					if (d.code == 1) {
						console.log("取消成功");
					}
				})
			},
			stopDown() {
				if (this.state == 0) {
					this.state = 1;
					clearInterval(this.timer);
				} else {
					this.state = 0;
					this.timeuot = 120;
					this.untime();
				}
			},
		},
		components: {

		}
	};
</script>

<style lang="less">
	.box {
		background-color: #98BFE0;
		height: 100%;
	}

	.head {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.jbt {
		width: 90%;
		margin: auto;
		text-align: center;
		padding: 20px 0;
		background: url(../../img/rommbg.png);
		background-size: 100% 100%;
		color: #fff;
	}

	.cont {
		height: 290px;
		width: 90%;
		margin: auto;
		border-top-left-radius: 35px;
		border-top-right-radius: 35px;
		background: linear-gradient(to bottom, #00A7EE 0%,#0065CE 100%);
		background-color: #0162a8;
	}
	.dqjb{
		width: 85%;
		margin: auto;
		padding: 15px 15px 15px 15px;
		background-color: #005072;
		color: #fff;
	}
	.zbjb{
		width: 85%;
		margin: auto;
		padding: 15px 15px 15px 15px;
		background-color: #8B6F22;
		border-top: 2px solid #fff;
		color: #fff;
	}
	.name {
		color: #efdc00;
		font-size: 30px;
		padding-top: 80px;
	}
	.jbs{
		width: 210px;
		height: 55px;
		line-height: 55px;
		border-radius: 9px;
		background-color: #009AF0;
	}
	.zbs{
		width: 210px;
		height: 55px;
		line-height: 55px;
		border-radius: 9px;
		background-color: #D5910F;
	}
	.jb {
		color: #efdc00;
		font-size: 30px;
		padding-top: 30px;
	}

	.foot {
		width: 90%;
		margin: auto;
		padding: 5px;
		background-color: #FEF6E6;
		color: #D84040;
		font-size: 14px;
	}

	.doun {
		color: #FF4444;
		font-size: 28px;
		vertical-align: baseline;
	}
</style>
